<template>
  <div
    style="padding: 0; width: 100%; user-select: none;height: 100%; overflow:hidden; overflow-y: auto"
    ref="grid"
  >
    <el-table
      :data="data"
      ref="tree"
      border
      :stripe="true"
      :highlight-current-row="true"
      :row-key="rowKey"
      @cell-mouse-enter="setCurrentRow"
      :cell-class-name="classNameChange"
      @cell-mouse-leave="cleanCurrentRow"
      style="width: 100%; text-align:center"
    >
      <el-table-column
        type="selection"
        width="55"
        align="center"
        v-if="showIndex"
        :selectable="handleSelectable"
      ></el-table-column>
      <el-table-column
        v-for="(item, index) in column"
        :key="index"
        align="center"
        :label="item.label"
        :prop="item.prop"
      ></el-table-column>
      <el-table-column v-if="showBtn" align="center" label="操作">
        <template slot-scope="scope">
          <slot name="btns" :data="scope"></slot>
        </template>
      </el-table-column>
    </el-table>
    <div class="floor">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :page-size="page.pageSize"
        :page-sizes="page.pageSizes"
        style="margin: auto; margin-bottom: 20px"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "grid",
  props: {
    notSelectAry: {
      default:() => {
        return {}
      }
    },
    column: {
      required: true
    },
    data: {
      default: () => {
        return []
      }
    },
    rowKey: {
      default: 'id'
    },
    page: {
      required: true
    },
    showBtn: {
      default: false
    },
    showIndex: {
      default: false
    }
  },
  data() {
    return {
      currentRow: "",
      gridHeight: 100
    };
  },
  methods: {
    handleCurrentChange(i) {
      this.$emit("current-change", i);
    },
    handleSizeChange(i) {
      this.$emit("size-change", i);
    },
    classNameChange(row, index) {
      if (row.row[this.rowKey] == this.currentRow) {
        return "currentRow";
      }
      return "";
    },
    cleanCurrentRow(row, column, cell, event) {
      if (this.currentRow == row[this.rowKey]) {
        this.currentRow = "";
      }
    },
    handleSelectable(row, index) {
      if (this.notSelectAry.indexOf(row[this.rowKey]) > -1) {
        return false;
      }
      return true;
    },
    setCurrentRow(row, column, cell, event) {
      this.currentRow = row[this.rowKey];
    }
  }
};
</script>

<style>
.floor {
  margin-top: 25px;
  display: flex;
}
.currentRow {
  background: #d4ddf7 !important;
}
th {
  background: #3c65d7 !important;
  color: white;
  padding: 9px 0 9px 0 !important;
}
td {
  padding: 9px 0 9px 0 !important;
}
</style>
